<template>
  <div>
    <van-sticky>
      <div class="header">首页</div>
    </van-sticky>
    <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch" />

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img :src="'http://218.7.112.123:10001/'+item.advImg" alt="">
      </van-swipe-item>
    </van-swipe>

    <div class="serviceAll">
      <dl v-for="sitem in serviceList" :key="sitem.id" @click="gotoService(sitem)">
        <dt>
          <img :src="'http://218.7.112.123:10001/'+sitem.imgUrl" alt="">
        </dt>
        <dd>
          {{sitem.serviceName}}
        </dd>
      </dl>
    </div>
    <div class="line"></div>
    <div class="title">
      <h3>热门主题</h3>
    </div>
    <div class="grid">
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
          <div>热门主题</div>
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          <div>热门主题</div>
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
          <div>热门主题</div>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="box"></div>
  </div>
</template>

<script>
import { bannerListQuery } from "../service/commons/banner";
import { serviceListQuery } from "../service/commons/service";
export default {
  data() {
    return {
      value: "",
      bannerList: [],
      serviceList: [],
    }
  },
  async created() {
    let { data } = await bannerListQuery({ type: 2 })
    console.log(data.rows);
    this.bannerList = data.rows;

    let { data: list } = await serviceListQuery();
    console.log(list);
    this.serviceList = list.rows.slice(0, 10);
  },
  methods: {
    gotoService(item) {
      switch (item.serviceName) {
        case "停哪儿":
          this.$router.push("/stop");
          break;
        case "城市地铁":
          this.$router.push("/metro");
          break;
        case "外卖订餐":
          this.$router.push("/takeout");
          break;
        case "找工作":
          this.$router.push("/job");
          break;
        case "找房子":
          this.$router.push("/house");
          break;
        case "生活缴费":
          this.$router.push("/living");
          break;
        case "看电影":
          this.$router.push("/movie");
          break;
        case "智慧交管":
          this.$router.push("/traffic");
          break;
        case "活动管理":
          this.$router.push("/active");
          break;
        default:
        Toast('没有接口哦');
      }
    },
    onSearch() {
      switch (this.value) {
        case "停哪儿":
          this.$router.push("/stop");
          break;
        case "城市地铁":
          this.$router.push("/metro");
          break;
        case "外卖订餐":
          this.$router.push("/takeout");
          break;
        case "找工作":
          this.$router.push("/job");
          break;
        case "找房子":
          this.$router.push("/house");
          break;
        case "生活缴费":
          this.$router.push("/living");
          break;
        case "看电影":
          this.$router.push("/movie");
          break;
        case "智慧交管":
          this.$router.push("/traffic");
          break;
        case "活动管理":
          this.$router.push("/active");
          break;
        default:
          this.$dialog.alert({
            message: "此功能暂未开放,敬请期待!"
          }).then(() => {

          })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.buttom {
  margin-bottom: 50px;
}

.box {
  height: 50px;
}

.serviceAll {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  margin-top: 20px;

  dl {
    width: 18%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    dt {
      text-align: center;
    }

    img {
      width: 70%;
    }
  }
}

.grid {
  margin-bottom: 50px;
}

.line {
  width: 100%;
  height: 10px;
  background-color: #ebe9e9;
}

.title {
  height: 50px;
  padding: 10px;

  h3 {
    display: inline-block;
    font-weight: normal;
    padding-bottom: 5px;
    border-bottom: 5px solid #dd5f35;
  }
}

.van-search__content {
  border-radius: 30px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  // font-size: 20px;
  // line-height: 150px;
  height: 150px;
  text-align: center;
  background-color: #39a9ed;

  img {
    width: 100%;
    height: 100%;
  }

}
</style>
